<script type="text/x-template" id="cider-search">
    <div class="content-inner search-page">
        <div class="search-input-container fs-search" v-if="$root.appMode == 'fullscreen'">
            <div class="search-input--icon"></div>
            <input type="search" spellcheck="false" @focus="$root.search.showHints = true"
                    @blur="$root.setTimeout(()=>{if($root.hintscontext != true){$root.search.showHints = false} }, 300)"
                   v-on:keyup.enter="$root.searchQuery($root.search.hints[$root.search.cursor]?.content ?? $root.search.hints[$root.search.cursor]?.searchTerm ?? $root.search.term);$root.search.showHints = false; $root.search.showSearchView = true" @input="$root.getSearchHints()"
                   :placeholder="$root.getLz('term.search') + '...'" v-model="$root.search.term"
                   class="search-input" />

            <div class="search-hints-container" v-if="$root.search.showHints && $root.search.hints.length != 0">
                <div class="search-hints">
                    <button class="search-hint text-overflow-elipsis" v-for="(hint, index) in $root.search.hints.filter((a) => {return a.content == null})" :class="{active: ($root.search.cursor == index)}"
                            @click="$root.search.term = hint.searchTerm;$root.search.showHints = false;$root.searchQuery(hint.searchTerm)">
                        {{ hint.displayTerm }}
                    </button>
                    <template v-for="(item, position) in $root.search.hints.filter((a) => {return a.content != null})">
                        <mediaitem-smarthints :item="item.content" :position="position"> </mediaitem-smarthints>
                    </template>
                </div>

            </div>
        </div>
        <div class="btn-group searchToggle">
            <button
                    @click="searchType = 'catalog'"
                    class="md-btn md-btn-small" :class="{'md-btn-primary': searchType == 'catalog'}">{{
                $root.getLz("term.appleMusic") }}
            </button>
            <button
                    @click="searchType = 'library';"
                    class="md-btn md-btn-small" :class="{'md-btn-primary': searchType == 'library'}">{{
                $root.getLz("term.library") }}
            </button>
        </div>
        <div v-if="search != null && search != [] && search.term != '' && $root.search.showSearchView">
            <template v-if="searchType == 'catalog'">
                <h3>{{app.getLz('term.topResult')}}</h3>
                <mediaitem-scroller-horizontal
                        :items="search?.results[search?.results?.meta?.results?.order[0]]?.data"></mediaitem-scroller-horizontal>
                <div class="row">
                    <div class="col" v-if="search.results.song">
                        <div class="row">
                            <div class="col">
                                <h3>{{app.getLz('term.songs')}}</h3>
                            </div>
                            <div class="col-auto cider-flex-center"
                                 @click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))"
                                 v-if="search.results.song.data.length >= 12">
                                <button class="cd-btn-seeall">{{app.getLz('term.seeAll')}}</button>
                            </div>
                        </div>
                        <div class="mediaitem-list-item__grid">
                            <listitem-horizontal :items="search.results.song.data.limit(12)">
                            </listitem-horizontal>
                        </div>
                    </div>
                    <div v-else style="text-align: center">
                        <h3>{{app.getLz('error.noResults')}}</h3>
                        <p>{{app.getLz('error.noResults.description')}}</p>
                    </div>
                </div>

                <template v-if="search.results['meta'] != null">
                    <template
                            v-for="section in search.results.meta.results.order"
                            v-if="section != 'song' && section != 'top'">
                        <div class="row">
                            <div class="col">
                                <h3>{{ app.friendlyTypes(section) }}</h3>
                            </div>
                            <div class="col-auto cider-flex-center" v-if="search.results[section].data.length >= 10">
                                <button class="cd-btn-seeall"
                                        @click="app.showSearchView(app.search.term, section, app.friendlyTypes(section))">
                                    {{app.getLz('term.seeAll')}}
                                </button>
                            </div>
                        </div>
                        <template v-if="!app.friendlyTypes(section).includes('Video')">
                            <mediaitem-scroller-horizontal-large
                                    :items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
                        </template>
                        <template v-else>
                            <mediaitem-scroller-horizontal-mvview
                                    :items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-mvview>
                        </template>
                    </template>
                </template>
                <template v-if="search.resultsSocial.playlist">
                    <div class="row">
                        <div class="col">
                            <h3>{{app.getLz('term.sharedPlaylists')}}</h3>
                        </div>
                        <div class="col-auto cider-flex-center" v-if="search.resultsSocial.playlist.data.length >= 10">
                            <button class="cd-btn-seeall"
                                    @click="app.showCollection(search.resultsSocial.playlist, 'Shared Playlists', 'default')">
                                {{app.getLz('term.seeAll')}}
                            </button>
                        </div>
                    </div>
                    <mediaitem-scroller-horizontal-large
                            :items="search.resultsSocial.playlist.data.limit(10)"></mediaitem-scroller-horizontal-large>
                </template>
                <template v-if="search.resultsSocial.profile">
                    <div class="row">
                        <div class="col">
                            <h3>{{app.getLz('term.people')}}</h3>
                        </div>
                        <div class="col-auto cider-flex-center" v-if="search.resultsSocial.profile.data.length >= 10">
                            <button class="cd-btn-seeall"
                                    @click="app.showCollection(search.resultsSocial.profile, 'People', 'default')">
                                {{app.getLz('term.seeAll')}}
                            </button>
                        </div>
                    </div>
                    <mediaitem-scroller-horizontal-large
                            :items="search.resultsSocial.profile.data.limit(10)"></mediaitem-scroller-horizontal-large>
                </template>
            </template>
            <template v-else>
                <h1>{{ $root.getLz("term.library") }}</h1>
                <div v-for="(section, key) in $root.search.resultsLibrary">
                    <h3>{{app.friendlyTypes(key)}}</h3>
                    <div class="mediaitem-list-item__grid" v-if="key.includes('songs')">
                        <listitem-horizontal :items="section.data"></listitem-horizontal>
                    </div>
                    <div class="well" v-else>
                        <mediaitem-scroller-horizontal-large
                                :items="section.data"></mediaitem-scroller-horizontal-large>
                    </div>
                </div>
            </template>
        </div>
        <div v-else>
            <div v-if="categoriesReady || getCategories()">
                <div>
                    <div class="col"
                         v-if="categoriesView != null && categoriesView != [] && categoriesView[0]?.attributes != null && categoriesView[0]?.attributes.title != null">
                        <h3>{{$root.getLz('home.recentlyPlayed')}}</h3>
                        <div class="mediaitem-list-item__grid">
                            <listitem-horizontal :items="recentlyPlayed.limit(10)">
                            </listitem-horizontal>
                        </div>
                        <!-- <mediaitem-square :kind="'385'" size="600" v-for="item in recentlyPlayed.limit(10)" :item="item" :imagesize="800"></mediaitem-square>-->
                        <h3>{{categoriesView[0]?.attributes?.title?.stringForDisplay ?? ""}}</h3>
                    </div>
                </div>
                <div class="categories">
                    <mediaitem-square :kind="'385'" :imageformat="'bb'" size="600" :removeamtext="true"
                                      :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
                                      :imagesize="800"
                                      v-for="item of getFlattenedCategories()"/>
                </div>
            </div>
        </div>
    </div>
</script>

<script>
  Vue.component('cider-search', {
    template: "#cider-search",
    props: ['search'],
    data: function() {
      return {
        app: this.$root,
        recentlyPlayed: [],
        categoriesView: [],
        categoriesReady: false,
        searchType: "catalog",
      }
    },
    methods: {
      getTopResult() {
        try {
          return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
        } catch (error) {
          return false
        }
      },
      async seeAllHistory() {
        let hist = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`, {
          l: this.$root.mklang
        })
        this.recentlyPlayed = hist.data.data
      },
      async getCategories() {
        if (this.categoriesView != [] && this.categoriesView.length > 0) {
          this.categoriesReady = true;
          return await true;
        } else {
          await this.seeAllHistory()
          let response = await this.app.mk.api.v3.music(`/v1/recommendations/${this.app.mk.storefrontId}?timezone=${encodeURIComponent(this.app.formatTimezoneOffset())}&name=search-landing&platform=web&extend=editorialArtwork&art%5Burl%5D=f%2Cc&types=editorial-items%2Capple-curators%2Cactivities&l=${this.$root.mklang}`);
          this.categoriesView = response.data.data;
          console.log(this.categoriesView)
          this.categoriesReady = true;
          return await true;
        }
      },
      getFlattenedCategories() {
        let flattened = [];
        for (let i = 0; i < this.categoriesView.length; i++) {
          if (this.categoriesView[i].relationships && this.categoriesView[i].relationships.contents && this.categoriesView[i].relationships.contents.data) {
            for (let j = 0; j < this.categoriesView[i].relationships.contents.data.length; j++) {
              if (this.categoriesView[i].relationships.contents.data[j].type != 'editorial-items')
                flattened.push(this.categoriesView[i].relationships.contents.data[j])
            }
          }
        }
        return flattened;
      }
    }
  })
</script>
